<template>
  <div class="footer" >
    <div class="top">
      <el-row class="common-width">
        <el-col :span="5">
          <div class="title">软件技术</div>
          <ul>
            <li v-for=" items in technology"><el-link :underline="false" @click="returnTechnology(items.id)">{{items.title}}</el-link></li>
          </ul>
        </el-col>
        <el-col :span="4">
          <div class="title">服务</div>
          <ul>
            <li v-for=" items in services"><el-link :underline="false" @click="returnServices(items.id)">{{items.title}}</el-link></li>
          </ul>
        </el-col>
        <el-col :span="5">
          <div class="title">解决方案</div>
          <ul>
            <li v-if="key<6"  v-for=" items,key in solution"> <el-link :underline="false" @click="returnSolution(items.id)" >{{items.title}}</el-link></li>
          </ul>
        </el-col>
        <el-col :span="4">
          <div class="title">关于映湃</div>
          <ul>
            <li><el-link :underline="false" href="#/about/1">公司简介</el-link></li>
            <li><el-link :underline="false" href="#/about/2">企业文化</el-link></li>
            <li><el-link :underline="false" href="#/about/3">管理团队</el-link></li>
            <li><el-link :underline="false" href="#/about/4">联系我们</el-link></li>
          </ul>
        </el-col>
        <el-col :span="6">
          <img src="../../static/image/logo.png">
          <div class="about">
           <div>
             <div>期待未来</div>
             <div style="padding-top: 5px">技术解决方案变革产品创建与服务方式</div>
           </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="bottom">
      &#169 {{year}} 山东映湃数据科技有限公司. 鲁ICP备18027941号
    </div>
  </div>
</template>

<script>
  export default {
    name: 'Footer',

    data () {
      return {
        year:"2018",
        footData: {},
        solution:[],
        technology:[],
        services:[]
      }
    },
    created() {
      let _self = this;
      _self.$store.dispatch('footData', {}).then(response => {
        this.solution = response.data.solution;
        this.technology = response.data.technology;
        this.services = response.data.services;
      }).catch(() => {
      })
    },
    mounted (){
      this.year=new Date().getFullYear();
    },
    methods:{
      returnSolution(id){
        window.location.href = "#/solution/" + id ;
        location.reload()
      },returnTechnology(id){
        window.location.href = "#/services/" + id ;
        location.reload()
      },returnServices(id){
        window.location.href = "#/services/" + id ;
        location.reload()
      }

    }
  }
</script>

<style scoped>

</style>
